<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--门诊、工号、执行医生、执行次数、支出-->
<style>
    body{
        width:100%;
        height:100%;
        background:#fff;
    }
    #branchcostReportTable{
        width:100%;
        height:100%;
    }
    #branchcostReportTable thead{
        text-align: center;
    }
    .icon{
        font-size: 50px;
        cursor:pointer;
        position:relative;
        top:8px;
        left:49%;
    }
    .iconColor{
        color:#1E9FFF;
    }
    .chart{
        display: none;
        position:absolute;
        top:10%;
    }
    #chartFrame ul{
        list-style: none;
        width:100%;
        height:50%;
    }
    #chartFrame ul li{
        float:left;
        width:50%;
    }
    #echart1{
        float:left;
        position:relative;
        width:500px;
        height:300px;

    }
    #echart2{
        float:left;
        position:relative;
        width:500px;
        height:300px;
    }
</style>
<link rel="stylesheet" href="../lib/layui-v2.1.6/layui/css/layui.css">
<body>
    <i class="layui-icon icon">&#xe62c;</i>
    <div class="table">
        <table class="layui-table" lay-skin="line row" id="branchcostReportTable" lay-filter="tableListen">
        </table>
    </div>
    <div class="chart">
        <div id="chartFrame">
            <ul>
                <li><div id="echart1"></div></li>
                <li><div id="echart2"></div></li>
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript" src="../lib/jquery.min.js"></script>
<script type="text/javascript" src="../lib/layui-v2.1.6/layui/layui.js"></script>
<script src="../lib/echart/echarts.js"></script>
<script>
    //表格窗口自适应设置
    var tableWidth=window.innerWidth*0.141;
    var iconSize=window.innerHeight*0.05;

    //图表窗体自适应设置
    var echartsWidth = window.innerWidth*0.5+'px';
    var echartHeight = window.innerHeight*0.6+'px';
    var echartHeight2 = window.innerHeight*0.6+'px';
    var chartWidth = window.innerWidth*0.9+'px';
    var chartHeight = window.innerHeight*0.9+'px';
    $('#chartFrame').css({'height':chartHeight});
    $('#chartFrame').css({'weight':chartWidth});
    $('#echart1').css({'width':echartsWidth,'height':echartHeight});
    $('#echart2').css({'width':echartsWidth,'height':echartHeight2});
    
    var barChart=echarts.init(document.getElementById("echart1"));//左边柱状图
    var pieChart=echarts.init(document.getElementById("echart2"));//右边饼图
    var barOption; //左边柱状图 属性设置
    var pieOption; //右边饼图 属性设置

    layui.use(["table"],function () {
        var $=layui.jquery;
        var table=layui.table;
        $('.icon').css({'font-size':iconSize});
        initTable();//初始化表格数据 ps :请求参数写死的
        iconEvent();//窗口转换图标事件
        initChartData();//初始化图表数据

        //初始化表格数据 ps :请求参数写死的
        function initTable() {
            var rowInfo = JSON.parse(localStorage.getItem("rowInfo"));
            var clinicReport = JSON.parse(localStorage.getItem("clinicReport"));
            var param = {
                clinicId : rowInfo.clinicId,
                projectId : rowInfo.projectId,
                startTime : clinicReport.startTime,
                endTime : clinicReport.endTime,
            };
            table.render({
                elem: '#branchcostReportTable' //指定原始表格元素选择器（推荐id选择器),
                ,page:true
                ,limit:10
                ,center:true
                ,cols: [[
                    {field:'clinicName',width:tableWidth,title:'门诊',align:'center'},
                    {field:'employeeCode',width:tableWidth,title:'工号',align:'center'},
                    {field:'employeeName',width:tableWidth,title:'执行医生',align:'center'},
                    {field:'number',width:tableWidth,title:'执行次数',align:'center'},
                    {field:'employeeCost',width:tableWidth,title:'医生支出',align:'center'},
                    {field:'clinicCost',width:tableWidth,title:'门诊支出',align:'center'},
                    {field:'totalCost',width:tableWidth,title:'总支出',sort:true,align:'center'}
                ]],
                url : "../reportController/getClinicOtherCostDetail",
                method : "post",
                where : param,
                response : {
                    statusName : "code", //数据状态的字段名称
                    statusCode : 200, //成功的状态码
                    countName: 'total', //数据总数的字段名称
                    msgName  : "msg", //状态信息的字段名称
                    dataName : "result" //数据列表的字段名称 
                }
            });
        }
        
         //初始化图标数据
         function initChartData() {
            //参数还未动态获取
            var rowInfo = JSON.parse(localStorage.getItem("rowInfo"));
            var clinicReport = JSON.parse(localStorage.getItem("clinicReport"));
            var param = {
                clinicId : rowInfo.clinicId,
                projectId : rowInfo.projectId,
                startTime : clinicReport.startTime,
                endTime : clinicReport.endTime,
            };
            $.ajax({
                data : param,
                url : "../reportController/getClinicOtherCostDetail",
                type : "POST",
                success : function(response) {
                    //console.log(response.result);
                    var data = response.result;

                    var branchTotalCost = 0.0;//所有分院总支出
                    var excutorTotalCost = 0.0;//执行医生总支出
                    var clinicTotalCost = 0.0;//门诊分成总支出
					var clinicName = JSON.parse(localStorage.getItem("rowInfo")).hospitalName;
                    for(var i = 0;i < data.length;i++) {
                        var rowInfo = data[i];
                        //console.log(excutorTotalCost);
                        //console.log(rowInfo.employeeCost);
                        //console.log(rowInfo.clinicCost);
                        excutorTotalCost = excutorTotalCost + rowInfo.employeeCost;
                        clinicTotalCost = clinicTotalCost + rowInfo.clinicCost;
                    }
                    branchTotalCost = excutorTotalCost + clinicTotalCost;
                    //console.log("branchcostReport.initChartData");
                    //console.log(clinicTotalCost);
                    //console.log(excutorTotalCost);
                    //console.log(branchTotalCost);
                    //设置柱状图属性
                    barOption = {
                        title:{
                            text: clinicName,
                            left:'5%'
                        },
                        grid: { left: '5%',right: '4%',top:'15%',bottom:'1%',containLabel: true },
                        tooltip:{
                            trigger:'axis',
                            axisPointer:{
                                type:'shadow'
                            }
                        },
                        legend:{
                            data:['分院总支出','执行医生支出','门诊支出'],
                            top:'2%'
                        },
                        xAxis:{
                            data:['分院总支出','执行医生支出','门诊支出']
                        },
                        yAxis:{
                            type:'value',
                        },
                        series:[
                            {
                                name:'支出',
                                type:'bar',
                                data:[branchTotalCost,excutorTotalCost,clinicTotalCost]
                            }
                        ]
                    }
                    //设置饼图图属性
                    pieOption = {
                        title:{text:'费用比例图',left:'45%'},
                        legend: {
                            top:'90%',
                            left:'35%',
                            data:['执行医生支出','门诊支出']
                        },
                        tooltip: {
                            trigger:'item',
                            axisPointer:{
                                type:'shadow'
                            }
                        },
                        series:[
                            {
                                name: '费用类型',
                                type: 'pie',
                                radius: '50%',
                                itemStyle:{
                                    normal:{
                                        label:{
                                            show:true,
                                            position:'outside',
                                            formatter: '{b} : {d}%',
                                        },
                                    }
                                },
                                selectedOffset:'10',
                                center: ['53%', '50%'],
                                data:[
                                    {value:excutorTotalCost, name:'执行医生支出'},
                                    {value:clinicTotalCost, name:'门诊支出'},
                                ]
                            }
                        ]
                    }
                }
            });
        }
        
        //窗口转换图标事件
        function iconEvent(){
            $('.icon').mouseenter(function(){
                $(this).addClass('iconColor');
            });
            $('.icon').mouseleave(function(){
                $(this).removeClass('iconColor');
            });
            var iconNum=0;
            $('.icon').click(function(){
                if(iconNum%2==0){
                    $('.table').hide();
                    $('.chart').show();
                    $('.icon').html("&#xe62d;");
                    barChart.clear();
                    pieChart.clear();
                    barChart.setOption(barOption);
                    pieChart.setOption(pieOption);
                }else{
                    $('.table').show();
                    $('.chart').hide();
                    $('.icon').html("&#xe62c;");
                }
                iconNum++;
            });
        }
    });
</script>
</html>